<template>
    <div>
        <h2>{{name}}-{{age}}</h2>
        <button @click="changeName">修改name</button>
        <button @click="changeAge">修改age</button>
    </div>
</template>

<script>
    import { watchEffect, ref } from 'vue'

    export default {
        setup() {
            // watchEffect: 自动收集响应式的依赖
            const name = ref('why');
            const age = ref(18);

            const stop = watchEffect((onInvalidate) => {
                const timer = setTimeout(() => {
                    console.log('网络请求成功');
                }, 2000)

                // 根据name和age两个变量发送网络请求
                onInvalidate(() => {
                    // 在这个函数中清除额外的副作用
                    // request.cancle();

                    clearTimeout(timer);

                    console.log('onInvalidate');
                });

                console.log('name: ', name.value, 'age: ', age.value);
            })

            const changeName = () => {
                name.value = 'kobe';
            }

            const changeAge = () => {
                age.value++;
                // 停止侦听
                if(age.value > 25) {
                    stop();
                }
            }
            
            // 刚开始会立即执行 收集相关依赖
            // watchEffect(() => {
            //     console.log('name: ', name.value, 'age: ', age.value);
            // })
                 

            return {
                name, 
                age,
                changeName,
                changeAge
            }
        }
    }
</script>

<style scoped>

</style>